<template>
  <n-form ref="ruleForm" :model="queryForm" :rules="rules">
    <n-grid x-gap="12" :cols="2">
      <n-gi>
        <NFormItem label="标题" path="name">
          <NInput v-model:value="queryForm.name" placeholder="请输入" />
        </NFormItem>
      </n-gi>
      <n-gi>
        <NFormItem label="分类" path="type_id">
          <n-select
            v-model:value="queryForm.type_id"
            :options="stateOptions.classify"
            placeholder="请选择"
            label-field="name"
            value-field="id"
          />
        </NFormItem>
      </n-gi>
      <n-gi>
        <NFormItem label="人员" path="author_id">
          <y-select-usr v-model="queryForm.author_id" @change="userChange" />
        </NFormItem>
      </n-gi>
      <n-gi>
        <NFormItem label="国家" path="country">
          <n-select
            v-model:value="queryForm.country"
            :options="countryEnum"
            placeholder="请选择"
            label-field="label"
            value-field="value"
          />
        </NFormItem>
      </n-gi>
      <n-gi>
        <NFormItem label="标签">
          <n-space>
            <n-tag
              closable
              v-for="item in queryForm.tags"
              :key="item"
              @close="handleClose(item)"
            >
              {{ item }}
            </n-tag>
            <n-tag class="cursor-pointer" @click="handAddTag">添加标签</n-tag>
          </n-space>
        </NFormItem>
      </n-gi>
      <n-gi>
        <NFormItem label="是否私密" path="private">
          <n-switch
            :checked-value="1"
            :unchecked-value="0"
            v-model:value="queryForm.private"
          />
        </NFormItem>
      </n-gi>
      <n-gi>
        <NFormItem label="价格" path="price">
          <NInputNumber
            class="w-full"
            v-model:value="queryForm.price"
            placeholder="请输入"
          />
        </NFormItem>
      </n-gi>
      <n-gi>
        <NFormItem label="权重" path="sort">
          <NInputNumber
            class="w-full"
            v-model:value="queryForm.sort"
            placeholder="请输入"
          />
        </NFormItem>
      </n-gi>
    </n-grid>
  </n-form>
  <choose-tag ref="tagRef" @change="tagChange" />
</template>
<script setup lang="ts">
import countryEnum from '@/enum/countryEnum'
import {
  FormRules,
  NForm,
  NFormItem,
  NInput,
  NInputNumber,
  NSelect,
  NSpace,
  NSwitch,
  NTag,
  NGrid,
  NGi,
  FormInst
} from 'naive-ui'
import { ref, inject } from 'vue'
import YSelectUsr from '@/components/yang/yselectuser/index.vue'
import type { photoListState } from '@/types/options'
import ChooseTag from '@/views/photo/list/components/ChooseTag.vue'
const stateOptions = inject('stateOptions') as photoListState
interface queryFormState {
  name: string
  type_id: number | undefined
  author_id: number | undefined
  country: string
  tags: string[]
  private: number
  price: number | undefined
  sort: number
}
const queryForm = ref<queryFormState>({
  name: '',
  type_id: undefined,
  author_id: undefined,
  tags: [],
  country: '',
  private: 0,
  price: undefined,
  sort: 1
})
const tagRef = ref()
const handAddTag = () => {
  tagRef.value.open()
}
const tagChange = (arr: any) => {
  queryForm.value.tags = [
    ...queryForm.value.tags,
    ...arr.filter((el: string) => {
      return !queryForm.value.tags.includes(el)
    })
  ]
}
const handleClose = (e: string) => {
  queryForm.value.tags = queryForm.value.tags.filter(
    (item: string) => item !== e
  )
}

const userChange = (e: any) => {
  queryForm.value.country = e.country
}
const ruleForm = ref<FormInst | null>(null)
const validate = () => {
  return new Promise((rel: any) => {
    ruleForm.value?.validate((errors: any) => {
      console.log(errors)
      if (errors) {
        rel({
          valid: false,
          arr: errors,
          name: '基础信息',
          form: queryForm.value
        })
      } else {
        rel({
          valid: true,
          arr: [],
          name: '基础信息',
          form: queryForm.value
        })
      }
    })
  })
}
const resetFields = () => {
  ruleForm.value?.restoreValidation()
}
const setValue = (newInfo: any) => {
  const keys = Object.keys(queryForm.value)
  for (const key in newInfo) {
    if (keys.includes(key)) {
      queryForm.value[key] = newInfo[key]
    }
  }
}
defineExpose({
  validate,
  resetFields,
  setValue
})

const rules: FormRules = {
  type_id: [
    {
      type: 'number',
      required: true,
      message: '分类不能为空',
      trigger: 'blur'
    }
  ],
  name: [
    {
      required: true,
      message: '标题不能为为空',
      trigger: 'blur'
    }
  ],
  author_id: [
    {
      type: 'number',
      required: true,
      message: '人员不能为为空',
      trigger: 'blur'
    }
  ],
  country: [
    {
      required: true,
      message: '国家不能为为空',
      trigger: 'blur'
    }
  ],
  private: [
    {
      type: 'number',
      required: true,
      message: '请选择是否私密',
      trigger: 'blur'
    }
  ],
  price: [
    {
      type: 'number',
      required: true,
      message: '请输入价格',
      trigger: 'blur'
    }
  ],
  sort: [
    {
      type: 'number',
      required: true,
      message: '请输入权重',
      trigger: 'blur'
    }
  ]
}
console.log('baseInfo初始化')
</script>

<style scoped lang="scss"></style>
